<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%> <%@ taglib prefix="c"
                                           uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt"
                                                                                                 uri="http://java.sun.com/jsp/jstl/fmt" %> <% String path =
        request.getContextPath(); String basePath = request.getScheme() + "://" +
        request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>我的订单 || Rongcha - 抹茶</title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Place favicon.ico in the root directory -->
  <link
          rel="shortcut icon"
          type="image/x-icon"
          href="<%=basePath%>images/img/favicon.ico"
  />
  <!-- All CSS Hear -->
  <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css" />
  <link rel="stylesheet" href="<%=basePath%>css/simple-line-icons.css" />
  <link rel="stylesheet" href="<%=basePath%>css/icofont.css" />
  <link rel="stylesheet" href="<%=basePath%>css/magnific-popup.css" />
  <link rel="stylesheet" href="<%=basePath%>css/animate.css" />
  <link rel="stylesheet" href="<%=basePath%>css/nice-select.css" />
  <link rel="stylesheet" href="<%=basePath%>css/jquery-ui.css" />
  <link rel="stylesheet" href="<%=basePath%>css/owl.carousel.min.css" />
  <link rel="stylesheet" href="<%=basePath%>css/mainmenu.css" />
  <!-- Style CSS Hear -->
  <link rel="stylesheet" href="<%=basePath%>css/style.css" />
  <link rel="stylesheet" href="<%=basePath%>css/responsive.css" />
  <script src="<%=basePath%>js/vendor/modernizr-2.8.3.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    .order-card {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      margin-bottom: 20px;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .order-header {
      background: #f8f9fa;
      padding: 15px 20px;
      border-bottom: 1px solid #e0e0e0;
      border-radius: 8px 8px 0 0;
    }
    .order-body {
      padding: 20px;
    }
    .order-status {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
    }
    .status-0 {
      background: #ffeaa7;
      color: #d63031;
    } /* 待支付 */
    .status-1 {
      background: #74b9ff;
      color: #fff;
    } /* 已支付 */
    .status-2 {
      background: #00b894;
      color: #fff;
    } /* 已发货 */
    .status-3 {
      background: #00cec9;
      color: #fff;
    } /* 已完成 */
    .status-4 {
      background: #636e72;
      color: #fff;
    } /* 已取消 */

    .order-detail-modal .modal-dialog {
      max-width: 800px;
    }
    .order-item {
      border-bottom: 1px solid #f0f0f0;
      padding: 15px 0;
    }
    .order-item:last-child {
      border-bottom: none;
    }
  </style>
</head>
<body>
<div class="wrapper">
  <!-- Header Start -->
  <header>
    <div class="header-area bg-gray">
      <div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-4">
            <div class="logo">
              <a href="<%=basePath%>views/user/index.jsp"
              ><img src="<%=basePath%>images/img/logo/logo.png" alt=""
              /></a>
            </div>
          </div>
          <div class="col-lg-9 col-md-8">
            <div class="header-main-content">
              <div class="main-menu-area d-none d-lg-block">
                <nav>
                  <ul>
                    <li>
                      <a href="<%=basePath%>views/user/index.jsp">首页</a>
                    </li>
                    <li>
                      <a href="<%=basePath%>views/user/about-us.jsp"
                      >关于我们</a
                      >
                    </li>
                    <li>
                      <a href="<%=basePath%>user/shop"
                      >商城 <i class="icofont icofont-simple-down"></i
                      ></a>
                      <ul class="sub-menu">
                        <li><a href="<%=basePath%>user/cart">购物车</a></li>
                        <li>
                          <a href="<%=basePath%>user/orders" class="active"
                          >订单</a
                          >
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="#">
                        我的 <i class="icofont icofont-simple-down"></i
                      ></a>
                      <ul class="sub-menu">
                        <li>
                          <a href="<%=basePath%>user/account">我的账户</a>
                        </li>
                        <li>
                          <a href="<%=basePath%>views/login.jsp"
                          >登录注册</a
                          >
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a href="<%=basePath%>views/user/blog.jsp">博客</a>
                    </li>
                    <li>
                      <a href="<%=basePath%>views/user/contact-us.jsp">
                        联系我们</a
                      >
                    </li>
                  </ul>
                </nav>
              </div>
              <div class="right-blok-box">
                <div class="serch-container hidden-xs">
                  <a href="#"><i class="icon-magnifier"></i></a>
                  <div class="blog-search">
                    <form action="#" id="search">
                      <input
                              type="text"
                              placeholder="点击此处进行搜索"
                              name="s"
                      />
                      <button type="submit">
                        <i class="icofont icofont-search-alt-1"></i>
                      </button>
                    </form>
                  </div>
                </div>
                <div class="mine-cart-box">
                  <a href="<%=basePath%>user/cart"
                  ><i class="icon-handbag"></i
                  ><span id="cart-total">2</span></a
                  >
                  <ul class="mini-cart">
                    <li class="cart-item">
                      <div class="cart-image">
                        <a href="<%=basePath%>views/user/single-product.jsp"
                        ><img
                                src="<%=basePath%>images/img/product/1.jpg"
                                alt=""
                        /></a>
                      </div>
                      <div class="cart-title">
                        <a href="<%=basePath%>views/user/single-product.jsp"
                        ><h4>热茶</h4></a
                        >
                        <span class="quantity">1 ×</span>
                        <div class="price-box">
                          <span class="new-price">$ 130.00</span>
                        </div>
                        <a href="#" class="remove_from_cart"
                        ><i class="icon-trash icons"></i
                        ></a>
                      </div>
                    </li>
                    <li class="cart-item">
                      <div class="cart-image">
                        <a href="<%=basePath%>views/user/single-product.jsp"
                        ><img
                                src="<%=basePath%>images/img/product/6.jpg"
                                alt=""
                        /></a>
                      </div>
                      <div class="cart-title">
                        <a href="<%=basePath%>views/user/single-product.jsp"
                        ><h4>水果绿茶</h4></a
                        >
                        <span class="quantity">1 ×</span>
                        <div class="price-box">
                          <span class="new-price">$ 100.99</span>
                        </div>
                        <a href="#" class="remove_from_cart"
                        ><i class="icon-trash icons"></i
                        ></a>
                      </div>
                    </li>
                    <li class="subtotal-titles">
                      <div class="subtotal-titles">
                        <h3>总价 :</h3>
                        <span>$ 230.99</span>
                      </div>
                    </li>
                    <li class="mini-cart-btns">
                      <div class="cart-btns">
                        <a href="<%=basePath%>user/cart"
                        >购物车</a
                        >
                        <a href="<%=basePath%>user/orders">订单</a>
                      </div>
                    </li>
                  </ul>
                </div>
                <div class="top-login-menu">
                  <div class="top-login-inner">
                    <c:choose>
                      <c:when test="${not empty sessionScope.customerName}">
                        <a href="<%=basePath%>user/account"
                        ><i class="icon-user"></i>
                          <span class="user-login"
                          >${sessionScope.customerName}</span
                          >
                        </a>
                      </c:when>
                      <c:otherwise>
                        <a href="<%=basePath%>views/login.jsp"
                        ><i class="icon-user"></i>
                          <span class="user-login">Login</span>
                        </a>
                      </c:otherwise>
                    </c:choose>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- Header End -->

  <!-- Breadcrumb Area Start -->
  <%--      <div class="breadcrumb-area ptb-100 bg-gray">--%>
  <%--        <div class="container">--%>
  <%--          <div class="row">--%>
  <%--            <div class="col">--%>
  <%--              <div class="breadcrumb-content text-center">--%>
  <%--                <h2>我的订单</h2>--%>
  <%--                <ul>--%>
  <%--                  <li><a href="<%=basePath%>views/user/index.jsp">首页</a></li>--%>
  <%--                  <li><a href="<%=basePath%>user/shop">商城</a></li>--%>
  <%--                  <li class="active">我的订单</li>--%>
  <%--                </ul>--%>
  <%--              </div>--%>
  <%--            </div>--%>
  <%--          </div>--%>
  <%--        </div>--%>
  <%--      </div>--%>
  <!-- Breadcrumb Area End -->

  <!-- Orders Area Start -->
  <div class="orders-area ptb-100">
    <div class="container">
      <c:choose>
        <c:when test="${not empty orders}">
          <div class="row">
            <div class="col-12">
              <h3 class="mb-4">我的订单</h3>

              <c:forEach items="${orders}" var="order">
                <div class="order-card">
                  <div class="order-header">
                    <div class="row align-items-center">
                      <div class="col-md-3">
                        <strong>订单号：${order.order_no}</strong>
                      </div>
                      <div class="col-md-3">
                        <fmt:formatDate
                                value="${order.payment_time}"
                                pattern="yyyy-MM-dd HH:mm:ss"
                        />
                      </div>
                      <div class="col-md-2">
                        <c:choose>
                          <c:when test="${order.status == 0}">
                                <span class="order-status status-0"
                                >待支付</span
                                >
                          </c:when>
                          <c:when test="${order.status == 1}">
                                <span class="order-status status-1"
                                >已支付</span
                                >
                          </c:when>
                          <c:when test="${order.status == 2}">
                                <span class="order-status status-2"
                                >已发货</span
                                >
                          </c:when>
                          <c:when test="${order.status == 3}">
                                <span class="order-status status-3"
                                >已完成</span
                                >
                          </c:when>
                          <c:otherwise>
                                <span class="order-status status-4"
                                >已取消</span
                                >
                          </c:otherwise>
                        </c:choose>
                      </div>
                        <%--                          <div class="col-md-2">--%>
                        <%--                            <strong--%>
                        <%--                              >¥<fmt:formatNumber--%>
                        <%--                                value="${order.total_amount}"--%>
                        <%--                                pattern="#,##0.00"--%>
                        <%--                            /></strong>--%>
                        <%--                          </div>--%>
                      <div class="col-md-2 text-right">
                        <button
                                type="button"
                                class="btn btn-sm btn-outline-primary"
                                onclick="showOrderDetail(${order.order_id})"
                        >
                          查看详情
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </c:forEach>
            </div>
          </div>
        </c:when>
        <c:otherwise>
          <div class="row">
            <div class="col-12">
              <div class="text-center py-5">
                <h4>暂无订单</h4>
                <p>您还没有任何订单记录</p>
                <a href="<%=basePath%>user/shop" class="btn btn-primary"
                >去购物</a
                >
              </div>
            </div>
          </div>
        </c:otherwise>
      </c:choose>
    </div>
  </div>
  <!-- Orders Area End -->

  <!-- Order Detail Modal -->
  <div
          class="modal fade order-detail-modal"
          id="orderDetailModal"
          tabindex="-1"
          role="dialog"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">订单详情</h5>
          <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
          </button>
        </div>
        <div class="modal-body" id="orderDetailContent">
          <!-- 订单详情内容将通过AJAX加载 -->
        </div>
        <div class="modal-footer">
          <button
                  type="button"
                  class="btn btn-secondary"
                  data-dismiss="modal"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer Start -->
  <footer class="footer-area bg-gray ptb-100">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="footer-content text-center">
            <p>&copy; 2023 Rongcha. All rights reserved.</p>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- Footer End -->
</div>

<!-- All JS Hear -->
<script src="<%=basePath%>js/vendor/jquery-1.12.0.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/jquery-ui.js"></script>
<script src="<%=basePath%>js/jquery.nice-select.min.js"></script>
<script src="<%=basePath%>js/jquery.magnific-popup.min.js"></script>
<script src="<%=basePath%>js/owl.carousel.min.js"></script>
<script src="<%=basePath%>js/jquery.slicknav.min.js"></script>
<script src="<%=basePath%>js/plugins.js"></script>
<script src="<%=basePath%>js/main.js"></script>

<script>
  // 显示订单详情
  function showOrderDetail(orderId) {
    $.ajax({
      url: "user/orderDetail",
      type: "GET",
      data: { orderId: orderId },
      success: function (response) {
        if (response.success) {
          var order = response.order;
          var orderItems = response.orderItems;
          var total = 0;
          var html = '<div class="order-info">';
          html += "<h6>订单信息</h6>";
          html += '<div class="row mb-3">';
          html +=
                  '<div class="col-md-6"><strong>订单号：</strong>' +
                  order.order_no +
                  "</div>";
          html +=
                  '<div class="col-md-6"><strong>下单时间：</strong>' +
                  formatDate(order.payment_time) +
                  "</div>";
          html += "</div>";
          html += '<div class="row mb-3">';
          html +=
                  '<div class="col-md-6"><strong>订单状态：</strong>' +
                  getStatusText(order.status) +
                  "</div>";
          for (var i = 0; i < orderItems.length; i++) {
            var item = orderItems[i];
            total += item.unit_price.toFixed(2) * item.quantity
          }
          html +=
                  '<div class="col-md-6"><strong>订单金额：</strong>¥' +

                  total +
                  "</div>";
          html += "</div>";
          html += "</div>";

          html += '<div class="order-items">';
          html += "<h6>商品信息</h6>";

          for (var i = 0; i < orderItems.length; i++) {
            var item = orderItems[i];
            html += '<div class="order-item">';
            html += '<div class="row align-items-center">';
            html += '<div class="col-md-6">';
            html +=
                    '<img src="<%=basePath%>images/img/product/' +
                    (item.tea_image || "1.jpg") +
                    '" alt="' +
                    item.tea_name +
                    '" style="width: 50px; height: 50px; object-fit: cover; margin-right: 10px;">';
            html += "<span>" + item.tea_name + "</span>";
            html += "</div>";
            html +=
                    '<div class="col-md-2">¥' +
                    item.unit_price.toFixed(2) +
                    "</div>";
            html += '<div class="col-md-2">×' + item.quantity + "</div>";

            html += "</div>";
            html += "</div>";
          }

          html += "</div>";

          $("#orderDetailContent").html(html);
          $("#orderDetailModal").modal("show");
        } else {
          alert(response.message || "获取订单详情失败");
        }
      },
      error: function () {
        alert("网络错误，请重试");
      },
    });
  }

  // 格式化日期
  function formatDate(dateString) {
    if (!dateString) return "";
    var date = new Date(dateString);
    return (
            date.getFullYear() +
            "-" +
            String(date.getMonth() + 1).padStart(2, "0") +
            "-" +
            String(date.getDate()).padStart(2, "0") +
            " " +
            String(date.getHours()).padStart(2, "0") +
            ":" +
            String(date.getMinutes()).padStart(2, "0") +
            ":" +
            String(date.getSeconds()).padStart(2, "0")
    );
  }

  // 获取状态文本
  function getStatusText(status) {
    switch (status) {
      case 0:
        return '<span class="order-status status-0">待支付</span>';
      case 1:
        return '<span class="order-status status-1">已支付</span>';
      case 2:
        return '<span class="order-status status-2">已发货</span>';
      case 3:
        return '<span class="order-status status-3">已完成</span>';
      default:
        return '<span class="order-status status-4">已取消</span>';
    }
  }
</script>
</body>
</html>
